<template>
    <div class="container">
        <el-card class="box-card" shadow="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="'个人中心'"></el-page-header>
            </div>
            <div class="itinerary_detail_content">
                <el-avatar :size="100" :src="circleUrl"></el-avatar>
                <br>
                <el-divider content-position="left">详细信息</el-divider>
                <br>
                <el-row :gutter="20">
                    <el-col :span="3" style="font-size:20px">
                        <i class="el-icon-user-solid"></i> <strong>账号</strong>
                    </el-col>
                    <el-col :span="8" :offset="-13">
                        {{ account }}
                    </el-col>
                </el-row>
                <br>
                <el-row :gutter="20">
                    <el-col :span="3" style="font-size:20px">
                        <svg-icon :iconname="'icon-bianhao'"></svg-icon> <strong>ID </strong>
                    </el-col>
                    <el-col :span="8" :offset="-13">
                        {{ user_id }}
                    </el-col>
                </el-row>
                <br>
                <el-divider content-position="left">账户操作</el-divider>
                <br>
                <el-row :gutter="20">
                    <el-col :span="3" style="font-size:20px">
                        <i class="el-icon-info"></i> <strong>身份</strong>
                    </el-col>
                    <el-col :span="8">
                        <el-tag :type="type == '0' ? 'primary' : 'danger'" size="medium">{{ type == '0' ? '游客' : '导游'
                        }}</el-tag>
                    </el-col>
                    <el-col :span="2" :offset="10">
                        <el-button type="primary" v-if="type === '0'" plain size="mini" icon="el-icon-circle-plus-outline"
                            @click="() => $router.push('/user/to_be_guide')">成为导游</el-button>
                        <el-button type="primary" v-else plain size="mini" icon="el-icon-s-flag" @click="() =>
                            $router.push('/user/guide')">我的行程</el-button>

                    </el-col>
                </el-row>
                <br>
                <el-row :gutter="20">
                    <el-col :span="3" style="font-size:20px">
                        <i class="el-icon-lock"></i> <strong>密码</strong>
                    </el-col>
                    <el-col :span="8">
                        ********
                    </el-col>
                    <el-col :span="2" :offset="10">
                        <el-button type="primary" plain size="mini" icon="el-icon-edit"
                            @click="update_password_visible = true">修改密码</el-button>
                        <el-dialog title="修改密码" :visible.sync="update_password_visible" width="400px" append-to-body>
                            <el-form label-position="right" :model="UPDATE" :rules="rules" ref="update_ref" id="update_ref">
                                <el-form-item label="旧密码" prop="old">
                                    <el-input placeholder="请输入您原本的密码" suffix-icon="el-icon-lock" v-model="UPDATE.old"
                                        clearable show-password>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="new">
                                    <el-input placeholder="请输入您要修改的密码" suffix-icon="el-icon-lock" v-model="UPDATE.new"
                                        clearable show-password>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="确认新密码" prop="confirm_new">
                                    <el-input placeholder="请再输一遍您要修改的密码" suffix-icon="el-icon-lock"
                                        v-model="UPDATE.confirm_new" clearable show-password>
                                    </el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button size="medium" @click="update_password_visible = false">取 消</el-button>
                                <el-button size="medium" type="primary" @click="update_password">确
                                    定</el-button>
                            </span>
                        </el-dialog>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <br>
                <el-row :gutter="20">
                    <el-col :span="24" style="text-align:center">
                        <el-button type="success" plain size="mini" icon="el-icon-sort"
                            @click="() => $router.push('/login')">切换用户</el-button>
                        <el-button type="primary" plain size="mini" icon="el-icon-circle-plus"
                            @click="() => $router.push('/register')">注册新账号</el-button>
                        <el-button type="danger" plain size="mini" icon="el-icon-error"
                            @click="() => $router.push('/login')">退出登录</el-button>
                    </el-col>
                </el-row>
            </div>

        </el-card>

    </div>
</template>

<script>
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        SvgIcon,
    },

    data() {
        // 表单验证规则
        let comfirm_password_validator = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.UPDATE.new) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            user: 0,
            update_password_visible: false,
            type: sessionStorage.type,
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            account: '',
            user_id: sessionStorage.user_id,
            UPDATE: {
                old: '',
                new: '',
                confirm_new: ''
            },
            // 验证规则
            rules: {
                old: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6, message: "至少 6 位", trigger: "blur" },
                ],
                new: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6, message: "至少 6 位", trigger: "blur" },
                ],
                confirm_new: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { validator: comfirm_password_validator, trigger: "blur" },
                ],
            },
        }
    },

    mounted() {
        // this.rules = rules
    },

    created() {
        this.account = sessionStorage.account
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_user_info() { },

        async update_password() {
            // 表单校验通过才进行提交
            this.$refs.update_ref.validate(async v_res => {
                console.log(v_res)
                if (!v_res) return
                try {
                    const res = await this.$http.post("/user/modpassword", {
                        // 携带数据
                        id: sessionStorage.user_id,
                        password: this.$md5(this.UPDATE.confirm_new)
                    });
                    if (res.data.code === 2000 && res.data.data === 1) {
                        this.$message.success('修改成功，请重新登录')
                        this.update_password_visible = false
                        this.$router.push('/index')
                    } else {
                        this.$message.error('修改失败')
                    }
                } catch (error) { }
            })
        },

        async my_itinerary() {

        },

        logout() { },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .itinerary_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

    }

    .itinerary_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

}

.box-card {
    border: 0;
}
</style>